<md-content class="md-padding">
  <div  ng-repeat="proxy in proxies">




      <div layout="column" layout-gt-xs="row">
      <div flex-gt-xs="25" class="col-lg-25">
        <md-card>
         <table style="table-layout: fixed;width: 100%;" border=0 ng-if="proxies" class="table">
           <colgroup>
     <col style="width: 10%;">
    <col style="width: 30%;">
    <col style="width: 60%;">
</colgroup>
            <tr valign="middle">
               <th> <div  style="width: 20px;" align="right" ng-include src="'static/menu-proxy.html'"></div></th><th>{{proxy.type}}</th><th></th>
            </tr>
            <tr>
               <td  colspan=2 style="min-width:40px;" >Id</td>
               <td>{{proxy.id}}</td>
            </tr>
            <tr>
               <td colspan=2>Server</td>
               <td  style="white-space: -o-pre-wrap;word-wrap:break-word;white-space: pre-wrap;dwhite-space: -moz-pre-wrap;white-space: -pre-wrap;">{{proxy.host}}</td>
            </tr>
            <tr>
               <td colspan=2>Status</td>
               <td ng-switch="proxy.state">
                 <span ng-switch-when="ProxyRunning" class="label label-primary">Running</span>
                     <span ng-switch-when="Failed" class="label label-danger">Failed</span>
                     <span ng-switch-when="Suspect" class="label label-warning">Suspect<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                     <span ng-switch-default class="label label-default">{{server.state}}</span>
            </td>
            </tr>
            <td colspan=2>Port</td>
            <td>{{proxy.port}}</td>
            <tr>
               <td colspan=2>Version</td>
               <td>{{proxy.version}}</td>
            </tr>
            <tr>
               <td colspan=2>Write Port</td>
               <td >{{proxy.writePort}}</td>
            </tr>
            <tr>
               <td colspan=2 ng-if="proxy.type=='proxysql'">Writer HG</td>
               <td ng-if="proxy.type=='proxysql'">{{proxy.writerHostGroup}}</td>
            </tr>
            <tr>
               <td colspan=2>Read Port</td>
               <td>{{proxy.readPort}}</td>
            </tr>
            <tr>
               <td colspan=2 ng-if="proxy.type=='proxysql'">Reader HG</td>
               <td ng-if="proxy.type=='proxysql'">{{proxy.readerHostGroup}}</td>
            </tr>
            <tr>
               <td colspan=2>Read Write Port</td>
               <td>{{proxy.readWritePort}}</td>
            </tr>
         </table>
       </md-card>
      </div>
      <div flex-gt-xs="5" class="col-lg-5"></div>
      <div flex-gt-xs="75" class="col-lg-75">
        <md-card>
         <table style="table-layout: fixed;width: 100%;"  border=0 class="table">
            <thead>
               <tr>
                 <th width="70px">Group</th>
                 <th >Db Name</th>
                 <th width="90px">DB Status</th>
                 <th width="90px">PX Status</th>
                 <th width="85px">Conns</th>
                 <th width="85px">Bytes Out</th>
                 <th width="85px">Bytes In</th>
                 <th width="90px">Sess Time</th>
                 <th width="90px" ng-if="proxy.type=='proxysql'">Id Group</th>
               </tr>
            </thead>
            <tr ng-repeat="server in proxy.backendsWrite" ng-class="{'active':server.state=='Master','danger': server.state=='SlaveErr','warning': server.state=='SlaveLate'  }">
               <td>Write</td>
               <td  style="white-space: -o-pre-wrap;word-wrap:break-word;white-space: pre-wrap;dwhite-space: -moz-pre-wrap;white-space: -pre-wrap;">{{server.prxName}}</td>
               <td ng-switch="server.status">
                  <span ng-switch-when="Master" class="label label-primary">Master<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="Failed" class="label label-danger">Failed<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="Suspect" class="label label-warning">Suspect<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="SlaveErr" class="label label-warning">Slave Error<label
                     ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="StandAlone" class="label label-info">Standalone<label
                     ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-default class="label label-default">{{server.status}}<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
               </td>
               <td>{{server.prxStatus}}</td>
               <td>{{server.prxConnections}}</td>
               <td>{{server.prxByteOut}}</td>
               <td>{{server.prxByteIn}}</td>
               <td>{{server.prxLatency}}</td>
               <td ng-if="proxy.type=='proxysql'">{{server.prxHostgroup}}</td>
            </tr>
          </table>
        </md-card>
          <BR>
              <md-card>
         <table style="table-layout: fixed;width: 100%;"  class="table">
            <tr>
              <th width="80px">Group</th>
              <th >Db Name</th>
              <th width="90px">DB Status</th>
              <th width="90px">PX Status</th>
              <th width="85px">Conns</th>
              <th width="85px">Bytes Out</th>
              <th width="85px">Bytes In</th>
              <th width="90px">Sess Time</th>
              <th width="90px" ng-if="proxy.type=='proxysql'">Id Group</th>
            </tr>

            <tr ng-repeat="server in proxy.backendsRead" ng-class="{'active':server.state=='Master','danger': server.state=='SlaveErr','warning': server.state=='SlaveLate'  }">
               <td>Read</td>
               <td  style="white-space: -o-pre-wrap;word-wrap:break-word;white-space: pre-wrap;dwhite-space: -moz-pre-wrap;white-space: -pre-wrap;">{{server.prxName}}</td>
               <td ng-switch="server.status">
                  <span ng-switch-when="Master" class="label label-primary">Master<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="Failed" class="label label-danger">Failed<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="Suspect" class="label label-warning">Suspect<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="SlaveErr" class="label label-warning">Slave Error<label
                     ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-when="StandAlone" class="label label-info">Standalone<label
                     ng-if="server.isVirtualMaster==true">-VMaster</label></span>
                  <span ng-switch-default class="label label-default">{{server.status}}<label ng-if="server.isVirtualMaster==true">-VMaster</label></span>
               </td>
               <td>{{server.prxStatus}}</td>
               <td>{{server.prxConnections}}</td>
               <td>{{server.prxByteOut}}</td>
               <td>{{server.prxByteIn}}</td>
               <td>{{server.prxLatency}}</td>
               <td ng-if="proxy.type=='proxysql'">{{server.prxHostgroup}}</td>
            </tr>
         </table>
       </md-card>
      </div>
      </div>

   <BR>
 </diV>

</md-content>
